/*基金-基金持仓页面 path: '/fundposition'*/
<template>
  <div class="fund-position common-fun-trade">
    <header-top :option="headerOption"></header-top>
    <div class="title">
      <div class="title_l"><span></span>我的持仓</div>
      <div class="title_r"><span @click.stop.prevent="toReal">跳转真实账户></span></div>
    </div>
    <position-list></position-list>
    <trade-to-real-modal></trade-to-real-modal>
  </div>
</template>

<script>
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'

  import HeaderTop from 'components/HeaderTop'
  import PositionList from 'components/fund/PositionList'
  import TradeToRealModal from 'components/modal/TradeToRealModal'

  export default {
    data () {
      return {
        headerOption: {
          title: '基金持仓',
          leftBtn: Constant.leftBtn.BACK,
          operations: []
        }
      }
    },
    components: {
      HeaderTop,
      PositionList,
      TradeToRealModal
    },
    methods: {
      //跳转真实账户
      toReal () {
        let kv = {"usercode":LocalDAO.getUserCode()}
        TDAPP.onEvent("21007","",kv)
        TDAPP.send()
        this.$store.dispatch('setModal', { visible: true, modalId: 'tradeToRealModal', stockCode: '', marketCd:'', tradeType: 'fund' })
      }
    }
  }
</script>

<style scoped>
  .fund-position .title{
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 5%;
    background-color: #fff;
  }
  .title .title_l{
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 16px;
  }
  .title .title_l span{
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    background: #33a7f1;
  }
  .title .title_r{
    color: #3078e7;
  }
</style>
